<template>
	<div class="user-detail">
		<div class="name">
			<img src="@/assets/img/user.svg" alt="">
			<div>用户:</div>
			<div class="user-name">{{ this.$route.query.phone }}</div>
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane :label="active[0].name" :name="active[0].key">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column align="center" label="操作" prop="title"></el-table-column>
					<el-table-column align="center" label="消费门店" prop="storename"> </el-table-column>
					<el-table-column align="center" label="支付金额" prop="paymentmoney"> </el-table-column>
					<el-table-column align="center" label="订单号" prop="ordernumber"> </el-table-column>
					<el-table-column align="center" label="支付时间" prop="odatetime"> </el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="this.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="this.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="this.total" background class="turnPage">
				</el-pagination>
			</el-tab-pane>
			<el-tab-pane :label="active[1].name" :name="active[1].key">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column align="center" label="操作" prop="title"></el-table-column>
					<el-table-column align="center" label="消费门店" prop="storename"> </el-table-column>
					<el-table-column align="center" label="支付金额" prop="paymentmoney"> </el-table-column>
					<el-table-column align="center" label="订单号" prop="ordernumber"> </el-table-column>
					<el-table-column align="center" label="支付时间" prop="odatetime"> </el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="this.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="this.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="this.total" background class="turnPage">
				</el-pagination>
			</el-tab-pane>
		</el-tabs>

	</div>
</template>

<script>
import { getUorder } from "@/api/getData"
export default {
	name: "UserDetail",
	data() {

		return {
			activeName: 0,
			userName: 'test',

			active: [
				// {
				// 	name: '开台记录',
				// 	key: "0"
				// },
				{
					name: '储值记录',
					key: "0"
				},

				{
					name: '消费记录',
					key: "1"
				}
			],
			tableData: [],
			total: 0,
			currentPage: 1,
			pageSize: 10
		};
	},
	methods: {
		handleClick(tab, event) {
			this.currentPage = 1
			this.pageSize = 10
			this.getUorder()
		},
		handleSizeChange(val) {
			this.pageSize = val;
			this.getUorder()
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.getUorder()
		},
		//获取扫码记录
		getUorder() {
			const params = {
				wxid: this.$route.query.userId,
				otype: this.activeName
			};
			getUorder(params).then((res) => {
				console.log(res)
				this.tableData = res.data.list
				this.total = res.data.total
			})
		},
	},
	mounted() {
		this.getUorder()
	},
};
</script>

<style lang="scss" scoped>
.user-detail {
	position: relative;
	padding: 12px 16px;
	background-color: #f5f5f5;

	.turnPage {
		text-align: right;
		margin-top: 20px;
	}
	.el-table::v-deep .el-table__cell{
		padding: 1.5rem 0;
	}
	.name {
		width: 250px;
		height: 60px;
		display: flex;
		align-items: center;
		font-size: 20px;
		color: rgba(9, 32, 32, 0.6);
		position: absolute;
		top: 12px;
		left: 16px;
		z-index: 6;

		img {
			width: 24px;
			margin: 0 12px 0 20px;
		}
	}

	.user-name {
		width: 140px;
		line-height: 60px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		z-index: 6;
	}

	>.el-tabs::v-deep {
		.el-tabs__header {
			margin-bottom: 20px;
			background-color: #fff;

			.el-tabs__active-bar {
				width: 80px !important;
			}
		}

		.el-tabs__nav-wrap::after {
			display: none;
		}

		.el-tabs__nav {
			margin-left: 250px;
		}

		.el-tabs__item {
			width: 184px;
			height: 60px;
			line-height: 60px;
			padding: 0 52px;
			font-size: 20px;
			color: rgba(9, 32, 32, 0.6);
		}

		.el-tabs__item:hover {
			color: #24bbd3;
		}

		.el-tabs__item.is-active {
			color: #24bbd3;
			font-weight: 700;
			box-shadow: none;
		}

		.el-tabs__content {
			height: calc(100vh - 203px);
			overflow-y: auto;

			.el-tab-pane {
				height: 100%;
			}
		}
	}
}
</style>